{extend name="common/cndex"}
{block name="body"}
<link rel="stylesheet" type="text/css" href="__SYSMET__/lib/Hui-iconfont/1.0.8/iconfont.css" />
<style type="text/css">
	.kj_span span{
		display: inline-block;
		width: 23px;
		height: 23px;
		background-color: #d91d36;
		border-radius: 50%;
		color: white;
		text-align: center;
		line-height: 25px;
	}
	 .kj_span .num01 {
	background:  rgb(229, 229, 0);
}
	 .kj_span .num02 {
background-color: rgb(42, 100, 174);
}

 .kj_span .num03 {
	background-color: rgb(148, 150, 149);
}

 .kj_span  .num04 {
	background: rgb(242, 149, 53);
}

  .kj_span .num05 {
	background:rgb(125, 203, 223);
}

 .kj_span .num06 {
	background:  rgb(44, 72, 156);;
}

 .kj_span .num07 {
	background: rgb(203, 203, 203);
}

 .kj_span .num08 {
	background: rgb(232, 51, 56);
}

 .kj_span .num09 {
	background-color: rgb(66, 30, 32);
}

  .kj_span .num10 {
	background: rgb(79, 178, 51);
}
 .kj_span .num_tu1{background:url(__TEMPLATE__/mobile/index/img/1.png) no-repeat;background-size:23px;color:transparent;}
 .kj_span .num_tu2{background:url(__TEMPLATE__/mobile/index/img/2.png) no-repeat;background-size:23px;color:transparent;}
 .kj_span .num_tu3{background:url(__TEMPLATE__/mobile/index/img/3.png) no-repeat;background-size:23px;color:transparent;}
 .kj_span .num_tu4{background:url(__TEMPLATE__/mobile/index/img/4.png) no-repeat;background-size:23px;color:transparent;}
 .kj_span .num_tu5{background:url(__TEMPLATE__/mobile/index/img/5.png) no-repeat ;background-size:23px;color:transparent;}
 .kj_span .num_tu6{background:url(__TEMPLATE__/mobile/index/img/6.png) no-repeat;background-size:23px;color:transparent;}
  
</style>
<div style="margin-bottom: 66px;margin-top: 44px;">
{volist name="caipai_list" id="item"}
<a href="{:url('lottery/runLottery')}?kjjg_id={$item.id}">
<div style="width: 100%;height: 100px;background-color: white;border-bottom:1px solid #ccc ;overflow: hidden;">
	<img id="img_{$item.id}"  src="__TEMPLATE__/sysme/images/{$item.id}.png" width="55"  style="margin-left: 4px;float:left;margin-right:8px;margin-top:22.5px;"/>
	<div style="float:left;width:76%;margin-top:12px;">
		<span id="name_{$item.id}">{$item.cp_name_new}</span>
		<p class="kj_span" style="margin:8px 0;width:100%;" id="code_{$item.id}"> 
		{if($item.id==36 || $item.id==44 || $item.id==72)}
		{volist name="item.kjjg" id="it"}
			<span style="display:inline-block;border-radius: 0%;"  class="num_tu{$it}" >{$it}</span>
		{/volist}
		{elseif($item.id==4 || $item.id==61 || $item.id==63) /}
		{volist name="item.kjjg" id="it"}
			<span style="display:inline-block;border-radius: 0%;" class="num{$it}" >{$it}</span>
		{/volist}
		
		{elseif($item.id==9)/}
		{volist name="item.kjjg" id="it"}
					
						{if ($it=='01'||$it=="02"||$it=="07"||$it=="08"||$it=="12"||$it=="13"||$it=="18"||$it=="19"||$it=="23"||$it=="24"||$it=="29"||$it=="30"||$it=="34"||$it=="35"||$it=="40"||$it=="45"||$it=="46")}
						<span class="normal"  style="background:red;">{$it}</span>
						{elseif($it=="05"||$it=="06"||$it=="11"||$it=="16"||$it=="17"||$it=="21"||$it=="22"||$it=="27"||$it=="28"||$it=="32"||$it=="33"||$it=="38"||$it=="39"||$it=="43"||$it=="44"||$it=="49") /}
						<span class="normal" style="background:green;">{$it}</span>
						{elseif($it=="03"||$it=="04"||$it=="09"||$it=="10"||$it=="14"||$it=="15"||$it=="20"||$it=="25"||$it=="26"||$it=="31"||$it=="36"||$it=="37"||$it=="41"||$it=="42"||$it=="47"||$it=="48") /}
						<span class="normal" style="background:blue;">{$it}</span>
						{/if}
						{if(count($item.kjjg)==($key+2))}
						+
						{/if}
					
				  {/volist}
		{else/}
		   {volist name="item.kjjg" id="it"}
			<span style="display:inline-block;">{$it}</span>
			{if condition="$item.id eq 9"}
				{if(count($item.kjjg)==($key+2))}
				+&nbsp;&nbsp;
				{/if}
			{/if}
		{/volist}
		{/if}
		</p>
		<div style="float:left;font-size:12px;color: #999;width:100%;">
			<span id="qihao_{$item.id}" style="float:left;">第{$item.qihao}期</span>
			<span style="float: right;margin-right: 10px;margin-top:1px;" id="time_{$item.id}">
                {if($item.jztime)}
                {$item.jztime|date="Y-m-d H:i",###}{/if}</span>
		</div>
	</div>
	<div style="float:right;height:100px;line-height:100px;margin-right:2px;" class="Hui-iconfont">&#xe6d7;</div>
</div>
</a>
{/volist}
</div>
<script>
    $('div.lott-menu li').click(function() {
        var cat = $(this).data('cat');
        if (cat == 1) 
        {
        //高频
            $('div.lottery-list li.game_category_2').hide();
            $('div.lottery-list-erect li.game_category_2').hide();
            $('div.lottery-list li.game_category_1').show();
            $('div.lottery-list-erect li.game_category_1').show();
        } else if (cat == 2) 
        {
        //低频
            $('div.lottery-list li.game_category_1').hide();
            $('div.lottery-list-erect li.game_category_1').hide();
            $('div.lottery-list li.game_category_2').show();
            $('div.lottery-list-erect li.game_category_2').show();
        } else
        {
         //全部
            $('div.lottery-list li').show();
            $('div.lottery-list-erect li').show();
        }
        for (var i = 0; i < 3; i++) 
        {
            if (i == cat) 
            {
            //选中
                $('div.lott-menu li.nav_category_'+i).hide();
                $('div.lott-menu li.nav_sel_'+i).show();
            } else 
            {
            //未选中
                $('div.lott-menu li.nav_category_'+i).show();
                $('div.lott-menu li.nav_sel_'+i).hide();
            }
        }
        loaded();
    });
	var ids = '{$cp_id}';
	setInterval(function(){
		$.ajax({
			type: "post",
			url: "/index/Processing/asyncDataDouble",
			data: {"ids":ids},
			success: function (data) {
				for(var i=0;i<data.length;i++){
					var detail = data[i];
					var id = parseInt(detail.id);
					var name = detail.cp_name;
					var kjjg = detail.kjjg;
					var qihao = detail.qihao;
					var time = detail.jztime;
					$('#img_'+id).attr('src','__TEMPLATE__/sysme/images/'+id+'.png');
					$('#name_'+id).html(name);
					$('#qihao_'+id).html("第"+qihao+"期");
					$('#time_'+id).html(time);
					var html = '';
					for(var j= 0;j<kjjg.length;j++){
						var code = kjjg[j];
						if( 36==id || 44==id || 72==id ){
							html += '<span style="display:inline-block;border-radius: 0%;margin-right:4px;"  class="num_tu'+code+'" >'+code+'</span>';
						}else if( 4==id || 61==id || 63==id ){
							html += '<span style="display:inline-block;border-radius: 0%;width:9%;margin-right:1%;" class="num'+code+'" >'+code+'</span>';
						}else if(9==id){
							if( '01'==kjjg[j] || '02'==kjjg[j] ||'07'==kjjg[j] ||'08'==kjjg[j] ||'12'==kjjg[j] ||'13'==kjjg[j] ||'18'==kjjg[j] ||'19'==kjjg[j] ||'23'==kjjg[j] ||'24'==kjjg[j] ||'29'==kjjg[j] ||'30'==kjjg[j] ||'34'==kjjg[j] ||'35'==kjjg[j] ||'40'==kjjg[j] ||'45'==kjjg[j] ||'46'==kjjg[j] ){
                                html += '<span style="display:inline-block;margin-right:4px;background:red;">'+code+'</span>';
                            }else if( '05'==kjjg[j] || '06'==kjjg[j] || '11'==kjjg[j] || '16'==kjjg[j] || '17'==kjjg[j] || '21'==kjjg[j] || '22'==kjjg[j] || '27'==kjjg[j] || '28'==kjjg[j] || '32'==kjjg[j] || '33'==kjjg[j] || '38'==kjjg[j] || '39'==kjjg[j] || '43'==kjjg[j] || '44'==kjjg[j] || '49'==kjjg[j] ){
                                html += '<span style="display:inline-block;margin-right:4px;background:green;">'+code+'</span>';
                            }else if( '03'==kjjg[j] ||'04'==kjjg[j] ||'09'==kjjg[j] ||'10'==kjjg[j] ||'14'==kjjg[j] ||'15'==kjjg[j] ||'20'==kjjg[j] ||'25'==kjjg[j] ||'26'==kjjg[j] ||'31'==kjjg[j] ||'36'==kjjg[j] ||'37'==kjjg[j] ||'41'==kjjg[j] ||'42'==kjjg[j] ||'47'==kjjg[j] ||'48'==kjjg[j] ){
                                html += '<span style="display:inline-block;margin-right:4px;background:blue;" >'+code+'</span>';
                            }
                            if( 9==id && kjjg.length==j+2 ){
								html += '+&nbsp;';
							}
						}else {
							html += '<span style="display:inline-block;margin-right:4px;">'+code+'</span>';
							
						}
					}
					$('#code_'+id).html(html);
				}
			}
		});
	},20000);
</script>
{/block}
